<template>
	<view class="container-bg">
		<!-- 轮播 -->
		<u-swiper radius="0" @change="e => currentNum = e.current" :list="info.album" indicator circular
			height="824rpx">
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text" v-if="info.album">{{ currentNum + 1 }}/{{ info.album.length }}</text>
			</view>
		</u-swiper>
		<view class="bg-white pad-30">
			<view class="font-50 color-theme">
				<text class="font-28">￥</text>
				<text class="font-w-500 mar-left-10">{{info.min_price}}</text>
				<text class="font-28 mar-left-10">起</text>
			</view>
		</view>
		<view class="pad-30">
			<view class="bg-white pad-30 radius24">
				<view class="font-36 font-w-200">{{info.name}}</view>

				<!-- 规格 -->
				<view class="mar-top-50">
					<view class="font-36 color-80 font-w-200 my-font">商品规格</view>
					<view class="rowW gap20 mar-top-20">
						<view @click="handelSpecs(index)" :class="specsTab==index ? 'on':''"
							class="specs font-28 radius8" v-for="(item,index) in specs">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>

			<view class="bg-white pad-30 radius24 mar-top-30">
				<!-- 介绍 -->
				<view class="font-36 color-80 font-w-200 my-font">商品介绍</view>
				<view class="mar-top-20">
					<u-parse class="mar-top-24" :content="info.desc"></u-parse>
				</view>
			</view>
		</view>


		<view class="button-box pad-left-right-32 pad-top-bottom-10 bg-white centerY">
			<view class="button-price"><text class="font-24">￥</text><text class="font-44">{{price}}</text></view>
			<view class="button flex-w" @click="hanldePay">立即购买</view>
		</view>

	</view>
</template>

<script>
	// 接口地址
	import {
		productInfo,
		addProOrder
	} from '@/config/api.js'
	export default {
		data() {
			return {
				// 详情数据
				info: {},
				// 规格
				specs: [],
				// 默认选中的规则
				specsTab: 0,
				// 价格
				price: '',
				// 轮播当前下标
				currentNum: 0
			}
		},
		onLoad(options) {
			this.goodsId = options.id
			this.getDataInfo();
		},
		methods: {
			// 立即购买
			hanldePay() {
				// 创建订单
				// addProOrder({
				// 	spec_id: this.specId
				// }).then(res => {
				// 	console.log(res);
				// })

				uni.navigateTo({
					url: `/pages/shopmall/order?specId=${this.specId}&id=${this.info.id}`
				})

			},
			// 切换商品规则
			handelSpecs(index) {
				this.specsTab = index;
				this.price = this.specs[index].price;
				this.specId = this.specs[index].id;
			},
			// 获取详情
			getDataInfo() {
				productInfo({
					id: this.goodsId
				}).then(res => {
					let {
						info,
						specs
					} = res.data;
					this.info = info;
					this.price = specs[0].price
					this.specId = specs[0].id;
					this.specs = specs;
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.container-bg {
		background-color: #f7f8fa;
		padding-bottom: 120rpx;


		::v-deep .u-swiper__indicator {
			position: absolute;
			right: 30rpx;
			bottom: 30rpx;
		}

		.indicator-num {
			padding: 2px 0;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 100px;
			width: 35px;
			display: flex;
			justify-content: center;

			&__text {
				color: #FFFFFF;
				font-size: 12px;
			}
		}

		.specs {
			background-color: rgba(0, 0, 0, 0.04);
			padding: 5rpx 20rpx;
			color: #999999;
		}

		.on {
			background-color: rgba(243, 65, 65, 0.05);
			color: rgb(243, 65, 65);
		}

		.color-80 {
			color: #5b4545;
		}
	}

	.button-box {
		position: fixed;
		width: 100%;
		bottom: 0;

		.button-price {
			width: 180rpx;
			margin-right: 100rpx;
		}

		.button {
			background: linear-gradient(270deg, #df0007, #df0007);
			color: #fff;
			text-align: center;
			height: 92rpx;
			line-height: 92rpx;
			border-radius: 46rpx;
		}

		.disabled {
			background: linear-gradient(270deg, #df0007, #df0007);
			opacity: .5;
			color: #fff;
			text-align: center;
			height: 92rpx;
			line-height: 92rpx;
			border-radius: 46rpx;
		}
	}
</style>